<!-- 本页样式 -->
<style scoped lang="scss">
.container {
  position: relative;
}
.button {
  margin-top: 35px;
}
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
}
.list-group-item i {
  cursor: pointer;
}
.box-card {
  /* // display: inline-block;
  //   float: left; */
  margin: 5px;
}

.card-add {
  display: inline-block;
  float: left;
}
.add-cad-btn {
  height: 115px;
  width: 114px;
  line-height: 61px;
}
.footer-conetent {
  clear: both;
  padding-top: 10px;
}
.clearfix {
  position: relative;
}
.el-icon-circle-close {
  height: 40px;
  width: 40px;
  position: absolute;
  right: -19px;
  top: -18px;
}
.itemName,
.columnDemo {
  display: inline-block;
  float: left;
  width: 150px;
  border-right: 1px solid #eee;
  margin-right: 20px;
}
.btn-card {
  background-color: #409eff;
  border-color: #409eff;
  text-align: center;
  color: #fff;
}
.box-card:hover .icon-conetent {
  display: inline-block;
  visibility: visible;
  // transition: visibility 0s 2s;
}
.icon-conetent {
  float: right;
  right: 0;
  cursor: pointer;
  /* display: none; */
  visibility: hidden;
}
.el-icon-delete {
  font-size: 22px;
}
.demo_item {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #000;
}
.demo_item_icon,
.demo_item_itemName,
.demo_item_columnDemo {
  display: inline-block;
  float: left;
}
.demo_item_itemName,
.demo_item_columnDemo {
  min-width: 80px;
  margin-left: 30px;
}
.demo_item_icon {
  width: 40px;
  cursor: pointer;
}
.el-icon-arrow-left {
  font-size: 20px;
}
.footer-conetent {
  height: 90px;
}
.dragcontent {
  height: 332px;
  overflow: auto;
}
</style>
<!-- 页面布局-->
<template>
  <div class="table applybatch_list">
    <!-- 主体区 -->
    <div class="container">
      <div class="dragcontent">
        <draggable
          class="list-group"
          tag="ul"
          v-model="fileTemplateDetailList"
          @start="isDragging = true"
          @end="isDragging = false"
        >
          <transition-group type="transition" name="flip-list">
            <el-card
              class="box-card"
              v-for="(element, index) in fileTemplateDetailList"
              :key="element.columnIndex"
            >
              <div class="text item">
                <div class="itemName">{{ element.columnName }}</div>
                <div class="columnDemo">{{ element.columnDemo }}</div>
                <div class="icon-conetent" @click="delTemItem(element, index)">
                  <i class="el-icon-delete"></i>
                </div>
              </div>
            </el-card>
          </transition-group>
        </draggable>
      </div>
      <div class="footer-conetent">
        <el-card class="box-card btn-card">
          <el-popover
            placement="top-end"
            width="400"
            v-model="visible"
            trigger="click"
          >
            <el-row style="height: 300px; overflow: auto">
              <el-col v-for="(demo, i) in fileTemplateSurplusList" :key="i">
                <div class="demo_item">
                  <div class="demo_item_icon" @click="toaddColumn(demo, i)">
                    <i class="el-icon-plus"></i>
                  </div>
                  <div class="demo_item_itemName">{{ demo.columnName }}</div>
                  <div class="demo_item_columnDemo">{{ demo.columnDemo }}</div>
                </div>
              </el-col>
            </el-row>
            <!-- @click="visible = true" -->
            <span
              slot="reference"
              style="display: inline-block; width: 100%; cursor: pointer"
              ><i class="el-icon-circle-plus-outline"></i>新增字段</span
            >
          </el-popover>
        </el-card>
        <!-- 按钮操作区 -->
        <span slot="footer" class="form-btn-box">
          <el-button v-if="actType == 'upd'" @click="toAddSave"
            >另存为</el-button
          >
          <el-button type="primary" @click="toSave">保 存</el-button>
          <el-button v-if="actType == 'upd'" @click="deleteMca()"
            >删除模板</el-button
          >
          <el-button @click="cnacelForm()">取 消</el-button>
        </span>
        <!-- 按钮操作区END -->
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs",
];
export default {
  components: {
    draggable,
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: false,
        ghostClass: "ghost",
      };
    },
  },
  data() {
    return {
      list: message.map((name, index) => {
        return { name, order: index + 1 };
      }),
      // 筛选条件
      parampters: {
        //查询参数
        vopId: "",
        ispId: "",
        fileTemplateId: "",
      },
      fileTemplateAllList: [], //mca文件列表
      fileTemplateDetailList: [], //mca文件详情列表
      fileColumnDemoList: [], // DEMO列列表
      fileTemplateSurplusList: [], //mca demo剩余的数组
      fileTemplateName: "", //模板文件名称
      disabled: false,
      //confirm提示信息弹框
      confirmBox: null,
      //所选记录id
      selectedId: "",
      //事物类型
      actType: "",
      //字典集
      dicts: {},
      dialogVisible: false,
      dialog_time: 5,
      dialogTimer: null,
      delDialogVisible: false,
      delApplyBatchNo: "",
      confirmDelApplyBatchNo: "",
      showDeltips: false,
      allStatusButton: [],
      visible: false, //气泡是否显示
      rightButton: [
        {
          id: 1,
          tag: "cardApplyBatch_button_exportDetail",
          name: "新增子任务",
          method: "toAddSub",
          type: "primary",
        },
      ],
      childShow: false,
    };
  },
  //弹出页
  props: {
    sourceData: {
      required: true,
    },
  },
  computed: {},
  // 进入页面加载数据
  mounted() {
    this.handleInitLoad();
  },
  methods: {
    /**
     * 组件初始化加载
     */
    handleInitLoad() {
      this.parampters.vopId = this.sourceData.vopId;
      this.parampters.ispId = this.sourceData.ispId;
      this.parampters.fileTemplateId = this.sourceData.seleid;
      this.actType = this.sourceData.actType;
      this.fileTemplateName = this.sourceData.fileTemplateName;
      this.toloadMcaColumnDemo();
    },

    /**
     * 查询指定 mca 模板所有字段明细
     * @param item mca文件模板一条记录
     */
    loadTemplateDetail() {
      this.$axios
        .get(`/herp/fileTemplate/${this.parampters.fileTemplateId}/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            if (data.data.length > 0) {
              this.fileColumnDemoList.forEach((demo, index) => {
                data.data.forEach((element) => {
                  if (element.columnCode == demo.columnCode) {
                    element.columnDemo = demo.columnDemo;
                    element.columnName = demo.columnName;
                  }
                });
              });
              this.fileTemplateDetailList = data.data;
              this.fileTemplateSurplusList = this.fileColumnDemoList.filter(
                (item) =>
                  !this.fileTemplateDetailList.some(
                    (val) => val.columnCode == item.columnCode
                  )
              );
              console.log("fileColumnDemoList", this.fileColumnDemoList);
              console.log(
                "fileTemplateSurplusList",
                this.fileTemplateSurplusList
              );
              console.log("tag", this.fileTemplateDetailList);
            }
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$error(err);
        });
    },
    /**
     * 新增指定虚商下 mca 模板
     */
    toAdd() {
      this.$axios
        .post(`/vop/${this.parampters.vopId}/fileTemplate/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.fileTemplateDetailList = data.data.columnList;
            this.fileTemplateName = data.data.fileTemplateName;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$error(err);
        });
    },
    /**
     * 查询 mca 模板所有有效字段样例
     */
    toloadMcaColumnDemo() {
      this.$axios
        .get("/herp/fileColumnDemo/", {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.fileColumnDemoList = data.data;
            this.loadTemplateDetail();
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$error(err);
        });
    },
    /**
     * 修改指定 mca 模板名称
     */
    toSave() {
      this.$axios
        .get(`/fileTemplate/${this.fileTemplateId}/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.fileColumnDemoList = data.data.columnList;
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$error(err);
        });
    },
    /**
     * 删除指定 mca 模板
     */
    toDelTemplate() {
      this.$axios
        .delete(`/herp/fileTemplate/${this.parampters.fileTemplateId}/`, {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true,
          },
        })
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$message({
              type: "success",
              message: "删除文件模板成功",
            });
            this.$emit("ok", {});
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$error(err);
        });
    },
    /**
     * 新增字段
     */
    toaddColumn(item, index) {
      this.disabled = false;
      let columnItem = this.fileTemplateSurplusList.splice(index, 1);
      this.fileTemplateDetailList.push(columnItem[0]);
      // this.visible = false;
      console.log("fileTemplateDetailList", this.fileTemplateDetailList);
      console.log("fileTemplateSurplusList", this.fileTemplateSurplusList);
    },
    /**
     * 删除指定 mca 模板部分字段
     * @param element 整条元素
     * @param index 元素的顺序
     */
    delTemItem(element, index) {
      this.$confirm(
        `模板将不再包含该字段，是否继续？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let columnItem = this.fileTemplateDetailList.splice(index, 1);
          this.fileTemplateSurplusList.push(columnItem[0]);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 保存分发
     */
    toSave() {
      this.actType == "add" ? this.toAddSave() : this.toUpdSave();
    },
    /**
     * 新增模式下的保存和修改模式下的另存为
     */
    toAddSave() {
      this.$prompt("", "请输入模板名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: this.fileTemplateName,
      })
        .then(({ value }) => {
          //获取模板名
          this.fileTemplateName = value;
          debugger;
          //对原数组进行排序
          let columnList = this.fileTemplateDetailList.map((item, index) => {
            item.columnIndex = index + 1;
            return item;
          });
          console.log("columnList", columnList);
          this.$axios
            .post(
              `/herp/vop/${this.parampters.vopId}/isp/${this.parampters.ispId}/fileTemplate/`,
              {
                fileTemplateName: this.fileTemplateName,
                columnList: columnList,
              },
              {
                headers: {
                  operator: this.$util.getLoginer().userid,
                  withCredentials: true,
                },
              }
            )
            .then((res) => {
              let data = res.data;
              if (data.success) {
                this.$message({
                  type: "success",
                  message: "新增文件模板成功！",
                });
                this.$emit("ok", { fileTemplateId: data.message });
              } else {
                this.$error(data.message);
              }
            })
            .catch((err) => {
              console.log(err);
              this.$error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
      return false;
    },
    /**
     * 新增模式下的保存和修改模式下的另存为
     */
    toUpdSave() {
      let columnList = this.fileTemplateDetailList.map((item, index) => {
        item.columnIndex = index + 1;
        return item;
      });
      console.log("columnList", columnList);
      this.$axios
        .put(
          `/herp/fileTemplate/${this.parampters.fileTemplateId}/`,
          {
            fileTemplateName: this.fileTemplateName,
            columnList: columnList,
          },
          {
            headers: {
              operator: this.$util.getLoginer().userid,
              withCredentials: true,
            },
          }
        )
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.$message({
              type: "success",
              message: "修改文件模板成功！",
            });
            this.$emit("ok", {
              fileTemplateId: this.parampters.fileTemplateId,
            });
          } else {
            this.$error(data.message);
          }
        })
        .catch((err) => {
          console.log(err);
          this.$error(err);
        });
    },
    /**
     * 取消mca文件模板
     */
    cnacelForm() {
      this.$emit("cancel", {});
    },
    /**
     * 取消mca文件模板
     */
    deleteMca() {
      this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.toDelTemplate();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
